<!-- 首页资讯组件 -->
<template>
  <div class="home-rec-container">
    <!-- 吸顶标签页 sticky offset-top="46px" -->
    <van-tabs
      class="channels-tabs"
      v-model:active="active"
      animated
      swipeable
      sticky
      offset-top="46px"
    >
      <!-- 标签页右侧展开按钮 -->
      <template #nav-right>
        <div class="wap-nav-div">
          <van-icon name="wap-nav" size="22px" class="tabs-right-icon"></van-icon>
        </div>
        <i class="placeholder"></i>
      </template>

      <van-tab title="推荐">
        <home-recommend></home-recommend>
      </van-tab>
      <van-tab title="PC游戏">
        <home-pc-game></home-pc-game>
      </van-tab>
      <van-tab title="主机游戏">
        <home-console-game></home-console-game>
      </van-tab>
      <van-tab title="手机游戏">
        <home-mobile-game></home-mobile-game>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
// 推荐页面
import HomeRecommend from './HomeRecommend.vue';
// PC游戏页面
import HomePcGame from './HomePcGame.vue';
// 主机游戏页面
import HomeConsoleGame from './HomeConsoleGame.vue';
// 手机游戏页面
import HomeMobileGame from './HomeMobileGame.vue';

import { ref } from 'vue';

const active = ref(0)

const windowTo = () => {
  // document.documentElement.scrollTop = 0
}

</script>

<style scoped>
.home-rec-container {
  /* padding-top需要比van-tabs设定的吸顶距离小1px,避免闪烁 */
  padding-top: 45px;
  padding-bottom: 50px;
}

.wap-nav-div {
  position: fixed;
  right: 1px;
  width: 22px;
  height: 44px;
  padding-right: 8px;
  background-color: #fff;
  /* box-shadow: -5px 0px 5px #fff; */
}

.tabs-right-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}

.placeholder {
  flex-shrink: 0;
  height: 44px;
  width: 22px;
}
</style>
